<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box
            }
    
            html {
                font-size: 12px;
                font-family: Ubuntu, simHei, sans-serif;
                font-weight: 400
            }
    
            body {
                font-size: 1rem
            }
    
            table,
            td,
            th {
                border-collapse: collapse;
                border-spacing: 0
            }
    
            table {
                width: 100%;
                margin: 20px;
            }
    
            td,
            th {
                border: 1px solid #bcbcbc;
                padding: 5px 10px
            }
    
            th {
                background: #42b983;
                font-size: 1.2rem;
                font-weight: 400;
                color: #fff;
                cursor: pointer
            }
    
            tr:nth-of-type(odd) {
                background: #fff
            }
    
            tr:nth-of-type(even) {
                background: #eee
            }
    
            fieldset {
                border: 1px solid #BCBCBC;
                padding: 15px;
            }
    
            input {
                outline: none
            }
    
            input[type=text] {
                border: 1px solid #ccc;
                padding: .5rem .3rem;
            }
    
            input[type=text]:focus {
                border-color: #42b983;
            }
    
            button {
                outline: none;
                padding: 5px 8px;
                color: #fff;
                border: 1px solid #BCBCBC;
                border-radius: 3px;
                background-color: #009A61;
                cursor: pointer;
            }
    
            button:hover {
                opacity: 0.8;
            }
    
            #app {
                margin: 0 auto;
                max-width: 480px;
            }
    
            #searchBar {
                margin: 10px;
                padding-left: 20px;
            }
    
            #searchBar input[type=text] {
                width: 80%;
            }
    
            .arrow {
                display: inline-block;
                vertical-align: middle;
                width: 0;
                height: 0;
                margin-left: 5px;
                opacity: 0.66;
            }
    
            .arrow.asc {
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-bottom: 4px solid #fff;
            }
    
            .arrow.dsc {
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-top: 4px solid #fff;
            }
    </style>
</head>

<body>
    <div id="app">
        <simple-grid :data="gridData" :columns='gridColumns'>
        </simple-grid>
    </div>
    <template id="grid-template">
        <table>
            <thead>
                <tr>
                    <th v-for='col in columns'>{{col}}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for='entry in data'>
                    <td v-for='col in columns'>
                        {{entry[col]}}
                    </td>
                </tr>
            </tbody>
        </table>
    </template>
    <script>
        Vue.component('simple-grid',{
            template:'#grid-template',
            props:{
                data:Array,
                columns:Array
            }
        })
        var demo=new Vue({
           el:'#app',
           data:{
               gridColumns:['name','age','sex'],
               gridData:[
                   {
                   name:'小明',
                   age:20,
                   sex:'男'},
                   {
                   name:'小王',
                   age:20,
                   sex:'男'},
                   {
                   name:'小张',
                   age:20,
                   sex:'男'},


               ]
           },
        });
    </script>
</body>

</html>